സി‌എസ്‌എസ് ആനിമേഷൻ റേഞ്ച്: സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷൻ നിയന്ത്രണത്തെക്കുറിച്ചുള്ള ഒരു ആഴത്തിലുള്ള വിശകലനം

വർഷങ്ങളായി, ഉപയോക്താവിൻ്റെ സ്ക്രോൾ സ്ഥാനത്തോട് പ്രതികരിക്കുന്ന ആനിമേഷനുകൾ നിർമ്മിക്കുന്നത് വെബ് അനുഭവങ്ങളെ ആകർഷകമാക്കുന്നതിൻ്റെ ഒരു പ്രധാന ഭാഗമാണ്. സൂക്ഷ്മമായ ഫേഡ്-ഇന്നുകൾ മുതൽ സങ്കീർണ്ണമായ പാരലാക്സ് ഇഫക്റ്റുകൾ വരെ, ഈ പ്രതിപ്രവർത്തനങ്ങൾ നിശ്ചലമായ പേജുകൾക്ക് ജീവൻ നൽകുന്നു. എന്നിരുന്നാലും, ഇതിന് പരമ്പരാഗതമായി ഒരു വലിയ വില നൽകേണ്ടി വന്നിട്ടുണ്ട്: ജാവാസ്ക്രിപ്റ്റിനെ ആശ്രയിക്കുന്നത്. സ്ക്രോൾ ഇവൻ്റുകൾ ശ്രദ്ധിക്കുന്ന ലൈബ്രറികളും കസ്റ്റം സ്ക്രിപ്റ്റുകളും പെർഫോമൻസിനെ ബാധിക്കുന്നവയാണ്, അവ മെയിൻ ത്രെഡിൽ പ്രവർത്തിക്കുകയും, പ്രത്യേകിച്ച് ശക്തി കുറഞ്ഞ ഉപകരണങ്ങളിൽ, ഉപയോക്താക്കൾക്ക് പ്രതികരണശേഷിയില്ലാത്തതും ഇടർച്ചകളുള്ളതുമായ അനുഭവങ്ങൾ നൽകുകയും ചെയ്യും.

വെബ് ആനിമേഷൻ്റെ ഒരു പുതിയ യുഗത്തിലേക്ക് പ്രവേശിക്കുക. സി‌എസ്‌എസിലെ ഏറ്റവും പുതിയ മുന്നേറ്റങ്ങൾ നമ്മൾ ഈ ഇടപെടലുകളെ കൈകാര്യം ചെയ്യുന്ന രീതിയിൽ വിപ്ലവം സൃഷ്ടിക്കുകയാണ്. സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷൻസ് സ്പെസിഫിക്കേഷൻ, ആനിമേഷനുകളെ ഒരു സ്ക്രോൾബാറിൻ്റെ സ്ഥാനവുമായോ അല്ലെങ്കിൽ വ്യൂപോർട്ടിനുള്ളിലെ ഒരു എലമെൻ്റിൻ്റെ ദൃശ്യതയുമായോ നേരിട്ട് ബന്ധിപ്പിക്കുന്നതിന് ശക്തവും, ഡിക്ലറേറ്റീവും, ഉയർന്ന പ്രകടനക്ഷമതയുമുള്ള ഒരു മാർഗ്ഗം നൽകുന്നു - അതും ഒരു വരി ജാവാസ്ക്രിപ്റ്റ് പോലുമില്ലാതെ.

ഈ പുതിയ മാതൃകയുടെ ഹൃദയഭാഗത്ത് രണ്ട് പ്രധാന പ്രോപ്പർട്ടികളുണ്ട്: animation-timeline, animation-range. animation-timeline പ്രോപ്പർട്ടി ആനിമേഷനെ നയിക്കുന്നത് എന്താണ് എന്ന് നിർവചിച്ചുകൊണ്ട് (ഉദാഹരണത്തിന്, ഡോക്യുമെൻ്റിൻ്റെ സ്ക്രോൾബാർ) വേദി ഒരുക്കുമ്പോൾ, നമ്മൾ എപ്പോഴും ആഗ്രഹിച്ചിരുന്ന സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുന്നത് animation-range ആണ്. ആ ടൈംലൈനിനുള്ളിൽ ഒരു ആനിമേഷൻ്റെ കൃത്യമായ ആരംഭ, അവസാന പോയിൻ്റുകൾ നിർവചിക്കാൻ ഇത് നമ്മളെ അനുവദിക്കുന്നു.

ഈ സമഗ്രമായ ഗൈഡിൽ, animation-range-ൽ പ്രത്യേക ശ്രദ്ധ കേന്ദ്രീകരിച്ചുകൊണ്ട് നമ്മൾ സി‌എസ്‌എസ് സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷനുകളുടെ ലോകം പര്യവേക്ഷണം ചെയ്യും. നമ്മൾ ഇനിപ്പറയുന്നവ ഉൾക്കൊള്ളും:

• സ്ക്രോൾ, വ്യൂ പ്രോഗ്രസ് ടൈംലൈനുകളുടെ അടിസ്ഥാന ആശയങ്ങൾ.
• animation-range പ്രോപ്പർട്ടിയുടെയും അതിൻ്റെ സിൻ്റാക്സിൻ്റെയും വിശദമായ വിഭജനം.
• പ്രോഗ്രസ് ബാറുകൾ, റിവീൽ ഇഫക്റ്റുകൾ എന്നിവയും അതിലേറെയും സൃഷ്ടിക്കുന്നതിനുള്ള പ്രായോഗികവും യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും.
• പ്രകടനം, പ്രവേശനക്ഷമത, ബ്രൗസർ അനുയോജ്യത എന്നിവയ്ക്കുള്ള മികച്ച രീതികൾ.

അതിശയകരവും അവിശ്വസനീയമാംവിധം കാര്യക്ഷമവുമായ ആനിമേഷനുകൾ അൺലോക്ക് ചെയ്യാൻ തയ്യാറാകുക, സങ്കീർണ്ണമായ ലോജിക്കുകളെ മെയിൻ ത്രെഡിൽ നിന്ന് കമ്പോസിറ്റർ ത്രെഡിലേക്ക് മാറ്റി, ഉറപ്പുള്ളതും സുഗമവുമായ അനുഭവം നൽകുന്നു.

അടിസ്ഥാനങ്ങളെ മനസ്സിലാക്കുന്നു: എന്താണ് സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷനുകൾ?

animation-range-ലേക്ക് കടക്കുന്നതിന് മുമ്പ്, അത് പ്രവർത്തിക്കുന്ന സിസ്റ്റം മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. പരമ്പരാഗതമായി, സി‌എസ്‌എസ് ആനിമേഷനുകൾ ഒരു സമയം-അധിഷ്ഠിത ടൈംലൈനുമായി ബന്ധിപ്പിച്ചിരിക്കുന്നു. നിങ്ങൾ animation-duration: 3s; എന്ന് നിർവചിക്കുമ്പോൾ, ആനിമേഷൻ ഒരു ക്ലോക്കിനാൽ നയിക്കപ്പെട്ട്, മൂന്ന് സെക്കൻഡിനുള്ളിൽ 0% മുതൽ 100% വരെ പുരോഗമിക്കുന്നു.

സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷനുകൾ ഇത് അടിസ്ഥാനപരമായി മാറ്റുന്നു. അവ പ്രോഗ്രസ് ടൈംലൈൻ എന്ന ആശയം അവതരിപ്പിക്കുന്നു, ഇത് സമയത്താലല്ല, മറിച്ച് പുരോഗതിയാലാണ് നയിക്കപ്പെടുന്നത് - ഒന്നുകിൽ ഒരു കണ്ടെയ്നർ സ്ക്രോൾ ചെയ്യുന്നതിൻ്റെ പുരോഗതി അല്ലെങ്കിൽ ഒരു എലമെൻ്റ് വ്യൂപോർട്ടിലൂടെ നീങ്ങുമ്പോൾ അതിൻ്റെ ദൃശ്യതയുടെ പുരോഗതി.

ഈ പുതിയ മോഡൽ മൂന്ന് പ്രധാന ഗുണങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു:

1. പെർഫോമൻസ്: ഈ ആനിമേഷനുകൾ ബ്രൗസറിൻ്റെ കമ്പോസിറ്റർ ത്രെഡിൽ മെയിൻ ത്രെഡിന് പുറത്ത് പ്രവർത്തിപ്പിക്കാൻ കഴിയുന്നതിനാൽ, അവ ജാവാസ്ക്രിപ്റ്റ്, ലേഔട്ട്, അല്ലെങ്കിൽ പെയിൻ്റ് പ്രവർത്തനങ്ങളുമായി വിഭവങ്ങൾക്കായി മത്സരിക്കുന്നില്ല. ഇതിൻ്റെ ഫലം, JS-അധിഷ്ഠിത സ്ക്രോൾ ലിസണറുകളെ പലപ്പോഴും ബാധിക്കുന്ന ഇടർച്ചകളില്ലാത്ത, അസാധാരണമാംവിധം സുഗമമായ ആനിമേഷനാണ്.
2. ലാളിത്യം: സി‌എസ്‌എസ് സിൻ്റാക്സ് ഡിക്ലറേറ്റീവ് ആണ്. നിങ്ങൾക്ക് എന്താണ് സംഭവിക്കേണ്ടതെന്ന് നിങ്ങൾ വ്യക്തമാക്കുന്നു, ബ്രൗസർ സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകൾ കൈകാര്യം ചെയ്യുന്നു. ഇത് പലപ്പോഴും ഇംപറേറ്റീവ് ജാവാസ്ക്രിപ്റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ വൃത്തിയുള്ളതും കൂടുതൽ പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ കോഡിലേക്ക് നയിക്കുന്നു.
3. പ്രവേശനക്ഷമത: ആനിമേഷനുകൾ prefers-reduced-motion പോലുള്ള ഉപയോക്തൃ മുൻഗണനകളെ സ്വയമേവ മാനിക്കുന്നു, ഇത് എല്ലാവരെയും ഉൾക്കൊള്ളുന്ന അനുഭവങ്ങൾ നിർമ്മിക്കുന്നത് എളുപ്പമാക്കുന്നു.

നിങ്ങൾ പ്രവർത്തിക്കാൻ പോകുന്ന രണ്ട് പ്രധാന തരം പ്രോഗ്രസ് ടൈംലൈനുകൾ ഉണ്ട്:

• സ്ക്രോൾ പ്രോഗ്രസ് ടൈംലൈൻ: ഒരു സ്ക്രോൾ കണ്ടെയ്നറിനുള്ളിലെ ("സ്ക്രോളർ") സ്ക്രോൾ സ്ഥാനം ട്രാക്ക് ചെയ്യുന്നു. ടൈംലൈൻ മുഴുവൻ സ്ക്രോൾ ചെയ്യാവുന്ന പരിധിയെ പ്രതിനിധീകരിക്കുന്നു, ഏറ്റവും മുകളിൽ (0%) നിന്ന് ഏറ്റവും താഴെ (100%) വരെ.
• വ്യൂ പ്രോഗ്രസ് ടൈംലൈൻ: ഒരു എലമെൻ്റ് വ്യൂപോർട്ട് മുറിച്ചുകടക്കുമ്പോൾ അതിൻ്റെ ദൃശ്യത ട്രാക്ക് ചെയ്യുന്നു. ടൈംലൈൻ വ്യൂപോർട്ടിലേക്ക് പ്രവേശിക്കുന്നത് മുതൽ പൂർണ്ണമായും പുറത്തുപോകുന്നത് വരെയുള്ള എലമെൻ്റിൻ്റെ യാത്രയെ പ്രതിനിധീകരിക്കുന്നു.

പ്രധാന ആശയം: `animation-timeline` പ്രോപ്പർട്ടി

ഒരു സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷൻ സൃഷ്ടിക്കുന്നതിനുള്ള ആദ്യപടി, ഒരു സാധാരണ സി‌എസ്‌എസ് ആനിമേഷനെ അതിൻ്റെ ഡിഫോൾട്ട് സമയം-അധിഷ്ഠിത ക്ലോക്കിൽ നിന്ന് വേർപെടുത്തി ഒരു പുതിയ പുരോഗതി-അധിഷ്ഠിത ടൈംലൈനിലേക്ക് അറ്റാച്ചുചെയ്യുക എന്നതാണ്. ഇത് animation-timeline പ്രോപ്പർട്ടി ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.

ഇത് ടൈംലൈനിൻ്റെ ഉറവിടം നിർവചിക്കുന്ന ഒരു ഫംഗ്ഷൻ സ്വീകരിക്കുന്നു: ഒന്നുകിൽ ഒരു സ്ക്രോൾ പ്രോഗ്രസ് ടൈംലൈനിനായി scroll() അല്ലെങ്കിൽ ഒരു വ്യൂ പ്രോഗ്രസ് ടൈംലൈനിനായി view().

സ്ക്രോൾ പ്രോഗ്രസ് ടൈംലൈൻ: `scroll()`

scroll() ഫംഗ്ഷൻ ഒരു ആനിമേഷനെ ഒരു കണ്ടെയ്നറിൻ്റെ സ്ക്രോൾ സ്ഥാനവുമായി ബന്ധിപ്പിക്കുന്നു. അതിൻ്റെ ഏറ്റവും സാധാരണമായ രൂപം scroll(scroller, axis) ആണ്.

• scroller: ഏത് സ്ക്രോളിംഗ് എലമെൻ്റിനെയാണ് ട്രാക്ക് ചെയ്യേണ്ടതെന്ന് വ്യക്തമാക്കുന്നു. ഇത് root (ഡോക്യുമെൻ്റിൻ്റെ വ്യൂപോർട്ട്), self (എലമെൻ്റ് തന്നെ, അതൊരു സ്ക്രോളർ ആണെങ്കിൽ), അല്ലെങ്കിൽ nearest (ഏറ്റവും അടുത്തുള്ള പൂർവ്വിക സ്ക്രോളർ) ആകാം.
• axis: ഏത് സ്ക്രോൾ ആക്സിസാണ് ട്രാക്ക് ചെയ്യേണ്ടതെന്ന് വ്യക്തമാക്കുന്നു. ഇത് block (ഉള്ളടക്കത്തിൻ്റെ പ്രധാന ദിശ, സാധാരണയായി ലംബമായി), inline (ബ്ലോക്കിന് ലംബമായി, സാധാരണയായി തിരശ്ചീനമായി), y, അല്ലെങ്കിൽ x ആകാം.

ഉദാഹരണം: ഒരു ലളിതമായ ഡോക്യുമെൻ്റ് സ്ക്രോൾ പ്രോഗ്രസ് ബാർ

ഉപയോക്താവ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ വലുതാകുന്ന ഒരു പ്രോഗ്രസ് ബാർ പേജിൻ്റെ മുകളിൽ നമുക്ക് ഉണ്ടാക്കാം.

            <!-- HTML -->
<div id="progress-bar"></div>

<!-- CSS -->
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 10px;
  width: 100%;
  background-color: dodgerblue;
  transform-origin: left;

  /* Detach from time, attach to document scroll */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, grow-progress ആനിമേഷൻ ഇപ്പോൾ പ്രധാന ഡോക്യുമെൻ്റ് (root) അതിൻ്റെ ലംബ അക്ഷത്തിൽ (block) സ്ക്രോൾ ചെയ്യുന്നതിലൂടെയാണ് നയിക്കപ്പെടുന്നത്. നിങ്ങൾ പേജിൻ്റെ 0% മുതൽ 100% വരെ സ്ക്രോൾ ചെയ്യുമ്പോൾ, പ്രോഗ്രസ് ബാറിൻ്റെ scaleX ട്രാൻസ്ഫോം 0-ൽ നിന്ന് 1-ലേക്ക് പോകുന്നു.

വ്യൂ പ്രോഗ്രസ് ടൈംലൈൻ: `view()`

view() ഫംഗ്ഷൻ ഒരു ആനിമേഷനെ ഒരു എലമെൻ്റിൻ്റെ സ്ക്രോളറിനുള്ളിലെ ദൃശ്യതയുമായി ബന്ധിപ്പിക്കുന്നു. എലമെൻ്റുകൾ കാഴ്ചയിലേക്ക് വരുമ്പോൾ "റിവീൽ" ആനിമേഷനുകൾ ട്രിഗർ ചെയ്യുന്നതിന് ഇത് അവിശ്വസനീയമാംവിധം ഉപയോഗപ്രദമാണ്.

അതിൻ്റെ സിൻ്റാക്സ് view(axis, inset) ആണ്.

• axis: ഓപ്ഷണൽ, scroll()-ലെ അതേ മൂല്യങ്ങൾ (ഉദാ. block). സ്ക്രോൾപോർട്ടിൻ്റെ ഏത് അക്ഷം പരിഗണിക്കണമെന്ന് നിർവചിക്കുന്നു.
• inset: ഓപ്ഷണൽ, IntersectionObserver-ൻ്റെ rootMargin-ന് സമാനമായി, ദൃശ്യത കണക്കാക്കാൻ ഉപയോഗിക്കുന്ന വ്യൂപോർട്ടിൻ്റെ അതിരുകൾ ക്രമീകരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം: ഒരു എലമെൻ്റ് ഫേഡ് ഇൻ ചെയ്യുന്നു

            <!-- HTML -->
<div class="content-box reveal">
  This box will fade in as it enters the screen.
</div>

<!-- CSS -->
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  /* Attach animation to this element's visibility */
  animation: fade-in linear;
  animation-timeline: view();
}
            

              
                Copy
              
            
          

ഇവിടെ, fade-in ആനിമേഷൻ .reveal എലമെൻ്റുമായിത്തന്നെ ബന്ധിപ്പിച്ചിരിക്കുന്നു. എലമെൻ്റ് വ്യൂപോർട്ടിലൂടെ സഞ്ചരിക്കുമ്പോൾ ആനിമേഷൻ പുരോഗമിക്കും. എന്നാൽ അത് എങ്ങനെയാണ് കൃത്യമായി മാപ്പ് ചെയ്യുന്നത്? അത് എപ്പോൾ തുടങ്ങുകയും അവസാനിക്കുകയും ചെയ്യും? അവിടെയാണ് animation-range വരുന്നത്.

ഇതിലെ താരം: `animation-range`

animation-timeline പശ്ചാത്തലം ഒരുക്കുമ്പോൾ, നിർണ്ണായകമായ നിയന്ത്രണം നൽകുന്നത് animation-range ആണ്. ടൈംലൈനിൻ്റെ ഏത് ഭാഗമാണ് "സജീവമായി" കണക്കാക്കേണ്ടതെന്ന് ഇത് നിർവചിക്കുകയും അതിനെ നിങ്ങളുടെ @keyframes ആനിമേഷൻ്റെ 0% മുതൽ 100% വരെയുള്ള പുരോഗതിയിലേക്ക് മാപ്പ് ചെയ്യുകയും ചെയ്യുന്നു.

അടിസ്ഥാന സിൻ്റാക്സ് ഇതാണ്:

            animation-range: <range-start> <range-end>;
            

              
                Copy
              
            
          

ഇത് ബ്രൗസറിനോട് പറയുന്നു: "ടൈംലൈൻ <range-start> പോയിൻ്റിൽ എത്തുമ്പോൾ, ആനിമേഷൻ 0% ആയിരിക്കണം. അത് <range-end> പോയിൻ്റിൽ എത്തുമ്പോൾ, ആനിമേഷൻ 100% ആയിരിക്കണം."

<range-start>, <range-end> എന്നിവയുടെ മൂല്യങ്ങൾ പല തരത്തിലൊന്നാകാം:

• കീവേഡുകൾ (view()-നായി): entry, exit, cover, contain പോലുള്ള പ്രത്യേകവും, വളരെ ലളിതവുമായ പേരുകൾ. ഇവയെക്കുറിച്ച് നമ്മൾ വിശദമായി പര്യവേക്ഷണം ചെയ്യും.
• ശതമാനം: ടൈംലൈനിൻ്റെ ആകെ ദൈർഘ്യത്തിൻ്റെ ഒരു ശതമാനം. ഒരു scroll() ടൈംലൈനിന്, 0% ഏറ്റവും മുകളിലും 100% ഏറ്റവും താഴെയുമാണ്.
• സി‌എസ്‌എസ് ലെങ്ത്സ്: 100px അല്ലെങ്കിൽ 20rem പോലുള്ള ഒരു നിശ്ചിത നീളമുള്ള മൂല്യം. ഇത് ടൈംലൈനിൻ്റെ തുടക്കത്തിൽ നിന്നുള്ള ആ സ്ക്രോൾ ഓഫ്‌സെറ്റിലെ ഒരു പോയിൻ്റ് വ്യക്തമാക്കുന്നു.

entry 50% അല്ലെങ്കിൽ cover 200px എന്നിങ്ങനെ വളരെ സൂക്ഷ്മമായ നിയന്ത്രണത്തിനായി നിങ്ങൾക്ക് കീവേഡുകൾ ശതമാനങ്ങളുമായോ നീളങ്ങളുമായോ സംയോജിപ്പിക്കാനും കഴിയും.

പ്രായോഗികമായ ആഴത്തിലുള്ള പഠനം: `scroll()` ടൈംലൈനുകൾക്കൊപ്പം `animation-range`

ഒരു scroll() ടൈംലൈനുമായി പ്രവർത്തിക്കുമ്പോൾ, നിങ്ങളുടെ ആനിമേഷൻ സ്ക്രോളറിൻ്റെ മൊത്തത്തിലുള്ള സ്ക്രോൾ ശ്രേണിയിലേക്ക് മാപ്പ് ചെയ്യുകയാണ്. ആ യാത്രയുടെ പ്രത്യേക ഭാഗങ്ങൾ ലക്ഷ്യമിടാൻ animation-range നമ്മളെ എങ്ങനെ സഹായിക്കുന്നു എന്ന് നോക്കാം.

ഒരു പ്രത്യേക സ്ക്രോൾ വിഭാഗം ലക്ഷ്യമിടുന്നു

നിങ്ങൾക്ക് ഒരു നീണ്ട ലേഖനമുണ്ടെന്നും ഉപയോക്താവ് പേജിൻ്റെ മധ്യഭാഗത്തുകൂടി സ്ക്രോൾ ചെയ്യുമ്പോൾ മാത്രം ഒരു പ്രത്യേക ഗ്രാഫിക് ആനിമേറ്റ് ചെയ്യണമെന്നും കരുതുക.

            @keyframes spin-and-grow {
  from { transform: rotate(0deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(360deg) scale(1); opacity: 1; }
}

.special-graphic {
  animation: spin-and-grow linear;
  animation-timeline: scroll(root block);

  /* Animation starts at 25% scroll and ends at 75% scroll */
  animation-range: 25% 75%;
}
            

              
                Copy
              
            
          

ഇതെങ്ങനെ പ്രവർത്തിക്കുന്നു:

• ഉപയോക്താവ് പേജിൻ്റെ 25% സ്ക്രോൾ ചെയ്യുന്നതിന് മുമ്പ്, ആനിമേഷൻ അതിൻ്റെ 0% അവസ്ഥയിൽ (rotate(0deg) scale(0.5) opacity: 0) നിർത്തുന്നു.
• ഉപയോക്താവ് 25% മാർക്കിൽ നിന്ന് 75% മാർക്കിലേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ആനിമേഷൻ 0% മുതൽ 100% വരെ പുരോഗമിക്കുന്നു.
• ഉപയോക്താവ് 75% മാർക്ക് കടന്നുപോയ ശേഷം, ആനിമേഷൻ അതിൻ്റെ 100% അവസ്ഥയിൽ (rotate(360deg) scale(1) opacity: 1) നിർത്തുന്നു.

animation-range-ൻ്റെ ഈ ലളിതമായ കൂട്ടിച്ചേർക്കൽ, വലിയ സ്ക്രോൾ അനുഭവത്തിനുള്ളിൽ നമ്മുടെ ഇഫക്റ്റുകളുടെ സമയത്തിലും സ്ഥാനത്തിലും ശക്തമായ നിയന്ത്രണം നൽകുന്നു.

കേവല നീളങ്ങൾ ഉപയോഗിക്കുന്നു

നിങ്ങൾക്ക് കേവല നീളങ്ങളും ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, സ്ക്രോൾ ചെയ്യുന്ന ആദ്യത്തെ 500 പിക്സലുകളിൽ മാത്രം ഒരു ആനിമേഷൻ സംഭവിക്കണമെങ്കിൽ:

            .hero-animation {
  animation: fade-out linear;
  animation-timeline: scroll(root block);

  /* Animation starts at scroll offset 0px and ends at 500px */
  animation-range: 0px 500px;
}
            

              
                Copy
              
            
          

ഉപയോക്താവ് ഉള്ളടക്കത്തിലേക്ക് ആഴത്തിൽ സ്ക്രോൾ ചെയ്യാൻ തുടങ്ങിയാൽ അവസാനിക്കേണ്ട, ഒരു പേജിൻ്റെ ഹീറോ വിഭാഗത്തിലെ ആമുഖ ആനിമേഷനുകൾക്ക് ഇത് അനുയോജ്യമാണ്.

`view()` ടൈംലൈനുകൾക്കൊപ്പം `animation-range` ഉപയോഗിക്കുന്നതിൽ വൈദഗ്ദ്ധ്യം നേടുന്നു

ഇവിടെയാണ് animation-range യഥാർത്ഥത്തിൽ മാന്ത്രികമാകുന്നത്. ഒരു view() ടൈംലൈനിനൊപ്പം ഉപയോഗിക്കുമ്പോൾ, റേഞ്ച് മൂല്യങ്ങൾ മുഴുവൻ ഡോക്യുമെൻ്റിൻ്റെ സ്ക്രോൾ ഉയരത്തെ അടിസ്ഥാനമാക്കിയുള്ളതല്ല, മറിച്ച് വ്യൂപോർട്ടിനുള്ളിലെ എലമെൻ്റിൻ്റെ ദൃശ്യതയെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. ഇവിടെയാണ് പ്രത്യേക പേരുള്ള റേഞ്ചുകൾ വരുന്നത്.

പേരുള്ള റേഞ്ചുകളുടെ വിശദീകരണം

ഒരു എലമെൻ്റും ("the subject") വ്യൂപോർട്ടും ("the scroller") സങ്കൽപ്പിക്കുക. ഈ രണ്ട് ബോക്സുകൾ തമ്മിലുള്ള ബന്ധത്തെയാണ് പേരുള്ള റേഞ്ചുകൾ വിവരിക്കുന്നത്.

• entry: സബ്ജക്റ്റ് വ്യൂപോർട്ടിലേക്ക് പ്രവേശിക്കുന്ന ഘട്ടം. സബ്ജക്റ്റിൻ്റെ താഴത്തെ അഗ്രം വ്യൂപോർട്ടിൻ്റെ മുകളിലെ അഗ്രം കടക്കുമ്പോൾ ഇത് ആരംഭിക്കുകയും സബ്ജക്റ്റിൻ്റെ താഴത്തെ അഗ്രം വ്യൂപോർട്ടിൻ്റെ താഴത്തെ അഗ്രം കടക്കുമ്പോൾ അവസാനിക്കുകയും ചെയ്യുന്നു.
• exit: സബ്ജക്റ്റ് വ്യൂപോർട്ടിൽ നിന്ന് പുറത്തുപോകുന്ന ഘട്ടം. സബ്ജക്റ്റിൻ്റെ മുകളിലെ അഗ്രം വ്യൂപോർട്ടിൻ്റെ മുകളിലെ അഗ്രം കടക്കുമ്പോൾ ഇത് ആരംഭിക്കുകയും സബ്ജക്റ്റിൻ്റെ മുകളിലെ അഗ്രം വ്യൂപോർട്ടിൻ്റെ താഴത്തെ അഗ്രം കടക്കുമ്പോൾ അവസാനിക്കുകയും ചെയ്യുന്നു.
• cover: സബ്ജക്റ്റ് വ്യൂപോർട്ടിനെ പൂർണ്ണമായും മറയ്ക്കാൻ തക്ക വലുപ്പമുള്ള ഘട്ടം. സബ്ജക്റ്റിൻ്റെ മുകളിലെ അഗ്രം വ്യൂപോർട്ടിൻ്റെ മുകളിലെ അഗ്രത്തിൽ തട്ടുമ്പോൾ ഇത് ആരംഭിക്കുകയും സബ്ജക്റ്റിൻ്റെ താഴത്തെ അഗ്രം വ്യൂപോർട്ടിൻ്റെ താഴത്തെ അഗ്രത്തിൽ തട്ടുമ്പോൾ അവസാനിക്കുകയും ചെയ്യുന്നു. സബ്ജക്റ്റ് വ്യൂപോർട്ടിനേക്കാൾ ചെറുതാണെങ്കിൽ, ഈ ഘട്ടം ഒരിക്കലും സംഭവിക്കുന്നില്ല.
• contain: സബ്ജക്റ്റ് വ്യൂപോർട്ടിനുള്ളിൽ പൂർണ്ണമായും ഉൾക്കൊള്ളുന്ന ഘട്ടം. സബ്ജക്റ്റിൻ്റെ താഴത്തെ അഗ്രം വ്യൂപോർട്ടിൻ്റെ താഴത്തെ അഗ്രത്തിലേക്ക് പ്രവേശിക്കുമ്പോൾ ഇത് ആരംഭിക്കുകയും സബ്ജക്റ്റിൻ്റെ മുകളിലെ അഗ്രം വ്യൂപോർട്ടിൻ്റെ മുകളിലെ അഗ്രത്തിൽ നിന്ന് പുറത്തുപോകുമ്പോൾ അവസാനിക്കുകയും ചെയ്യുന്നു. സബ്ജക്റ്റ് വ്യൂപോർട്ടിനേക്കാൾ വലുതാണെങ്കിൽ, ഈ ഘട്ടം ഒരിക്കലും സംഭവിക്കുന്നില്ല.

പ്രായോഗിക ഉദാഹരണം: ക്ലാസിക് "സ്ക്രോളിൽ വെളിപ്പെടുത്തുന്ന" ഇഫക്റ്റ്

സ്ക്രോൾ-അധിഷ്ഠിത ആനിമേഷനുകളിൽ ഏറ്റവും സാധാരണമായ ഒന്ന് നമുക്ക് പുനഃസൃഷ്ടിക്കാം: സ്ക്രീനിലേക്ക് പ്രവേശിക്കുമ്പോൾ മങ്ങുകയും സ്ലൈഡ് ചെയ്യുകയും ചെയ്യുന്ന ഒരു എലമെൻ്റ്. പരമ്പരാഗതമായി, ഇതിന് ജാവാസ്ക്രിപ്റ്റിൽ ഒരു ഇൻ്റർസെക്ഷൻ ഒബ്സർവർ ആവശ്യമായിരുന്നു. ഇപ്പോൾ, ഇത് ഏതാനും വരി സി‌എസ്‌എസ് മാത്രം മതി.

            <!-- HTML -->
<section>
  <div class="content-box reveal">Box 1</div>
  <div class="content-box reveal">Box 2</div>
  <div class="content-box reveal">Box 3</div>
</section>

<!-- CSS -->
@keyframes fade-and-slide-in {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-and-slide-in linear both; /* 'both' is important! */
  animation-timeline: view();

  /* Start animation when element enters, end when it's halfway through entering */
  animation-range: entry 0% entry 50%;
}

            

              
                Copy
              
            
          

ആ animation-range മൂല്യം നമുക്ക് വിഭജിക്കാം:

• animation-fill-mode: both; നിർണ്ണായകമാണ്. ആനിമേഷൻ്റെ സജീവ ശ്രേണിക്ക് മുമ്പ്, എലമെൻ്റ് അതിൻ്റെ from അവസ്ഥയിലും (അദൃശ്യവും താഴേക്ക് മാറിയതും), ശ്രേണിക്ക് ശേഷം, അത് അതിൻ്റെ to അവസ്ഥയിലും (പൂർണ്ണമായും ദൃശ്യവും യഥാസ്ഥാനത്തും) തുടരുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു.
• entry 0%: ആരംഭ പോയിൻ്റ്. ഇത് entry ഘട്ടത്തിൻ്റെ തുടക്കത്തെ സൂചിപ്പിക്കുന്നു - നമ്മുടെ എലമെൻ്റിൻ്റെ താഴ്ഭാഗം വ്യൂപോർട്ടിൻ്റെ താഴ്ഭാഗത്ത് സ്പർശിക്കുന്ന കൃത്യമായ നിമിഷം.
• entry 50%: അവസാന പോയിൻ്റ്. എലമെൻ്റ് entry ഘട്ടത്തിലൂടെയുള്ള അതിൻ്റെ യാത്രയുടെ 50% പൂർത്തിയാക്കിയ നിമിഷത്തെ ഇത് സൂചിപ്പിക്കുന്നു. ഈ സമയത്ത്, ആനിമേഷൻ 100% പൂർത്തിയായിരിക്കും.

ഇതൊരു മനോഹരമായ പ്രഭാവം നൽകുന്നു, അവിടെ ഉപയോക്താവ് സ്ക്രീനിൻ്റെ മധ്യഭാഗത്തേക്ക് സ്ക്രോൾ ചെയ്യുന്നതിന് വളരെ മുമ്പുതന്നെ ഇനം പൂർണ്ണമായും ദൃശ്യമാവുകയും അതിൻ്റെ അന്തിമ സ്ഥാനത്ത് എത്തുകയും ചെയ്യുന്നു. നിങ്ങൾക്ക് ആവശ്യമുള്ള കൃത്യമായ അനുഭവം ലഭിക്കുന്നതിന് ഈ ശതമാനങ്ങൾ മാറ്റാവുന്നതാണ്. ഉദാഹരണത്തിന്, entry 25% entry 75% കൂടുതൽ ദൈർഘ്യമുള്ള ഒരു ആനിമേഷൻ സൃഷ്ടിക്കും.

വിപുലമായ നിയന്ത്രണം: ഒരു പാരലാക്സ് ഇഫക്റ്റ് സൃഷ്ടിക്കുന്നു

നമുക്ക് കൂടുതൽ സങ്കീർണ്ണമായ ഒരു ഇഫക്റ്റ് പരീക്ഷിക്കാം. ഒരു പശ്ചാത്തല ചിത്രം അതിൻ്റെ കണ്ടെയ്നർ വ്യൂപോർട്ടിനെ മറയ്ക്കുന്ന സമയത്ത് മാത്രം, സ്ക്രോളിനേക്കാൾ വ്യത്യസ്തമായ വേഗതയിൽ നീങ്ങുന്നように ചെയ്യാം.

            <!-- HTML -->
<div class="parallax-container">
  <div class="parallax-bg"></div>
  <h2>Parallax Section</h2>
</div>

<!-- CSS -->
@keyframes parallax-shift {
  from { background-position: 50% -50px; }
  to   { background-position: 50% 50px; }
}

.parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  inset: -50px; /* Make it taller than container to allow movement */
  background-image: url('your-image.jpg');
  background-size: cover;

  animation: parallax-shift linear both;
  animation-timeline: view(block);
  /* Animate across the entire 'cover' phase */
  animation-range: cover 0% cover 100%; 
}

            

              
                Copy
              
            
          

ഈ സാഹചര്യത്തിൽ, parallax-shift ആനിമേഷൻ parallax-bg എലമെൻ്റിൻ്റെ ടൈംലൈനുമായി ബന്ധിപ്പിച്ചിരിക്കുന്നു. animation-range cover ഘട്ടത്തിൻ്റെ മുഴുവൻ ദൈർഘ്യത്തിലേക്കും സജ്ജീകരിച്ചിരിക്കുന്നു. ഇതിനർത്ഥം, കണ്ടെയ്നർ വ്യൂപോർട്ടിനെ മറയ്ക്കാൻ തക്ക ഉയരമുള്ളതാകുമ്പോഴും അതിൻ്റെ മുകൾഭാഗം വ്യൂപോർട്ടിൻ്റെ മുകൾഭാഗത്ത് എത്തുമ്പോഴും മാത്രമേ ആനിമേഷൻ പുരോഗമിക്കാൻ തുടങ്ങുകയുള്ളൂ. കണ്ടെയ്നറിൻ്റെ താഴ്ഭാഗം വ്യൂപോർട്ടിൻ്റെ താഴ്ഭാഗത്ത് എത്തുമ്പോൾ ഇത് അവസാനിക്കുന്നു. ഇതിൻ്റെ ഫലം സ്ക്രോൾ സ്ഥാനവുമായി തികച്ചും സമന്വയിപ്പിച്ച, സുഗമവും പ്രകടനക്ഷമതയുമുള്ള ഒരു പാരലാക്സ് ഇഫക്റ്റാണ്.

എല്ലാം സംയോജിപ്പിക്കുന്നു: ഷോർട്ട്‌ഹാൻഡുകളും മികച്ച രീതികളും

`animation` ഷോർട്ട്‌ഹാൻഡ്

സിൻ്റാക്സ് കൂടുതൽ സംക്ഷിപ്തമാക്കാൻ, ടൈംലൈൻ, റേഞ്ച് പ്രോപ്പർട്ടികൾ നേരിട്ട് animation ഷോർട്ട്‌ഹാൻഡ് പ്രോപ്പർട്ടിയിൽ ഉൾപ്പെടുത്താം. ഇത് പിന്തുണ നേടിക്കൊണ്ടിരിക്കുന്ന ഒരു പുതിയ, നിർദ്ദേശിക്കപ്പെട്ട സിൻ്റാക്സാണ്.

നമ്മുടെ റിവീൽ-ഓൺ-സ്ക്രോൾ ഉദാഹരണം ഇങ്ങനെ മാറ്റിയെഴുതാം:

            .reveal {
  animation: fade-and-slide-in linear both view() entry 0% entry 50%;
}
            

              
                Copy
              
            
          

ഈ ഒറ്റവരി, മൂന്ന് വ്യത്യസ്ത animation, animation-timeline, animation-range പ്രോപ്പർട്ടികൾക്ക് പകരമാണ്. ഇത് വൃത്തിയുള്ളതും കാര്യക്ഷമവുമാണ്, കൂടാതെ എല്ലാ ആനിമേഷൻ ലോജിക്കുകളെയും ഒരിടത്ത് നിലനിർത്തുന്നു.

പ്രകടന പരിഗണനകൾ

സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷനുകളുടെ പ്രാഥമിക നേട്ടം പ്രകടനമാണ്. ഈ നേട്ടം നിലനിർത്താൻ, കമ്പോസിറ്റർ ത്രെഡിന് കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യുന്നതിന് നിങ്ങൾ മുൻഗണന നൽകണം. അവ പ്രധാനമായും ഇവയാണ്:

• transform (translate, scale, rotate)
• opacity

width, height, margin, അല്ലെങ്കിൽ color പോലുള്ള പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യുന്നത് ഇപ്പോഴും പ്രവർത്തിക്കും, പക്ഷേ അവ മെയിൻ ത്രെഡിൽ സംഭവിക്കുന്ന ലേഔട്ട്, പെയിൻ്റ് പ്രവർത്തനങ്ങളെ ട്രിഗർ ചെയ്തേക്കാം. JS-അധിഷ്ഠിത ബദലുകളേക്കാൾ പലപ്പോഴും സുഗമമാണെങ്കിലും, അവ കമ്പോസിറ്റർ-ഒൺലി ആനിമേഷനുകൾ പോലെ പ്രകടനക്ഷമമായിരിക്കില്ല.

പ്രവേശനക്ഷമതയും ഫാൾബാക്കുകളും

എല്ലാ ഉപയോക്താക്കൾക്കുമായി നിർമ്മിക്കേണ്ടത് അത്യാവശ്യമാണ്. സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷനുകൾ മികച്ചതാണ്, എന്നാൽ ചില ഉപയോക്താക്കൾക്ക് ചലനം ശ്രദ്ധ തിരിക്കുന്നതോ ഓക്കാനം വരുത്തുന്നതോ ആയി തോന്നാം.

1. ഉപയോക്തൃ മുൻഗണനകളെ മാനിക്കുക: നിങ്ങളുടെ ചലനവുമായി ബന്ധപ്പെട്ട സി‌എസ്‌എസ് എപ്പോഴും ഒരു prefers-reduced-motion മീഡിയ ക്വറിക്കുള്ളിൽ പൊതിയുക.

            @media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fade-and-slide-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}
            

              
                Copy
              
            
          

2. പഴയ ബ്രൗസറുകൾക്കായി ഫാൾബാക്കുകൾ നൽകുക: ഇതൊരു പുതിയ സാങ്കേതികവിദ്യയായതിനാൽ, ഇതിനെ പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകളെ നിങ്ങൾ പരിഗണിക്കണം. @supports നിയമം ഇവിടെ നിങ്ങളുടെ ഉറ്റ സുഹൃത്താണ്. ലളിതവും ആനിമേഷൻ ഇല്ലാത്തതുമായ ഒരു ഡിഫോൾട്ട് സ്റ്റേറ്റ് നൽകുക, തുടർന്ന് പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾക്കായി അത് മെച്ചപ്പെടുത്തുക.

            /* Default state for all browsers */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Enhancement for supporting browsers */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0; /* Set initial state for animation */
      transform: translateY(50px);
      animation: fade-and-slide-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

            

              
                Copy
              
            
          

ബ്രൗസർ പിന്തുണയും മുന്നോട്ടുള്ള കാഴ്ച്ചയും

2023 അവസാനത്തോടെ, സി‌എസ്‌എസ് സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷനുകൾ Chrome, Edge എന്നിവയിൽ പിന്തുണയ്ക്കുന്നു. Firefox-ൽ അവ സജീവമായ വികസനത്തിലാണ്, Safari പരിഗണിച്ചുകൊണ്ടിരിക്കുകയാണ്. ഏതൊരു പുതിയ വെബ് പ്ലാറ്റ്ഫോം ഫീച്ചറിനെയും പോലെ, ഏറ്റവും പുതിയ പിന്തുണ വിവരങ്ങൾക്കായി CanIUse.com പോലുള്ള ഉറവിടങ്ങൾ പരിശോധിക്കേണ്ടത് അത്യാവശ്യമാണ്.

ഈ സാങ്കേതികവിദ്യയുടെ ആവിർഭാവം വെബ് ഡെവലപ്‌മെൻ്റിൽ ഒരു സുപ്രധാന മാറ്റത്തെ അടയാളപ്പെടുത്തുന്നു. സമ്പന്നവും, സംവേദനാത്മകവും, പ്രകടനക്ഷമവുമായ അനുഭവങ്ങൾ ഡിക്ലറേറ്റീവ് ആയി സൃഷ്ടിക്കാൻ ഇത് ഡിസൈനർമാരെയും ഡെവലപ്പർമാരെയും ശാക്തീകരിക്കുന്നു, ഒരു സാധാരണ യുഐ പാറ്റേണുകളുടെ ഒരു മുഴുവൻ ക്ലാസിനും ജാവാസ്ക്രിപ്റ്റിനെ ആശ്രയിക്കുന്നത് കുറയ്ക്കുന്നു. ബ്രൗസർ പിന്തുണ മെച്ചപ്പെടുമ്പോൾ, ഓരോ ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പറുടെയും ടൂൾകിറ്റിൽ സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷനുകൾ ഒരു പ്രധാന ഉപകരണമായി മാറുമെന്ന് പ്രതീക്ഷിക്കുക.

ഉപസംഹാരം

സി‌എസ്‌എസ് സ്ക്രോൾ-ഡ്രിവൺ ആനിമേഷനുകൾ, പ്രത്യേകിച്ച് animation-range പ്രോപ്പർട്ടി, വെബ് ആനിമേഷന് ഒരു വലിയ മുന്നേറ്റത്തെ പ്രതിനിധീകരിക്കുന്നു. നമ്മൾ സമയം-അധിഷ്ഠിത ടൈംലൈനുകളിൽ നിന്ന് പുരോഗതി-അധിഷ്ഠിത ടൈംലൈനുകളിലേക്ക് മാറിയിരിക്കുന്നു, സങ്കീർണ്ണവും സ്ക്രോൾ-അവബോധമുള്ളതുമായ ഇടപെടലുകൾ സമാനതകളില്ലാത്ത പ്രകടനത്തോടും ലാളിത്യത്തോടും കൂടി സൃഷ്ടിക്കാനുള്ള കഴിവ് അൺലോക്ക് ചെയ്യുന്നു.

നമ്മൾ പഠിച്ചത്:

• animation-timeline ഒരു ആനിമേഷനെ scroll() അല്ലെങ്കിൽ view() പ്രോഗ്രസ് ടൈംലൈനുമായി ബന്ധിപ്പിക്കുന്നു.
• animation-range നമുക്ക് കൃത്യമായ നിയന്ത്രണം നൽകുന്നു, ആ ടൈംലൈനിൻ്റെ ഒരു പ്രത്യേക ഭാഗം നമ്മുടെ ആനിമേഷൻ്റെ കീഫ്രെയിമുകളിലേക്ക് മാപ്പ് ചെയ്യുന്നു.
• view() ടൈംലൈനുകൾക്കൊപ്പം, entry, exit, cover, contain പോലുള്ള ശക്തമായ പേരുള്ള റേഞ്ചുകൾ ഒരു എലമെൻ്റിൻ്റെ ദൃശ്യതയെ അടിസ്ഥാനമാക്കി ആനിമേഷനുകൾ നിയന്ത്രിക്കാൻ ഒരു അവബോധജന്യമായ മാർഗ്ഗം നൽകുന്നു.
• കമ്പോസിറ്റർ-സൗഹൃദ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ചും ഫാൾബാക്കുകൾ നൽകുന്നതിലൂടെയും, പ്രവേശനക്ഷമവും, പ്രകടനക്ഷമവും, ആനന്ദകരവുമായ ഉപയോക്തൃ അനുഭവങ്ങൾ നിർമ്മിക്കാൻ നമുക്ക് ഇന്ന് ഈ സാങ്കേതികവിദ്യ ഉപയോഗിക്കാം.

ലളിതമായ ഇഫക്റ്റുകൾക്കായി ഇടർച്ചകളുള്ളതും, മെയിൻ-ത്രെഡ്-ബ്ലോക്ക് ചെയ്യുന്നതുമായ സ്ക്രോൾ ലിസണറുകളുമായി പോരാടുന്ന ദിവസങ്ങൾ എണ്ണപ്പെട്ടു. സ്ക്രോൾ-അധിഷ്ഠിത ആനിമേഷൻ്റെ ഭാവി ഇവിടെയുണ്ട്, അത് ഡിക്ലറേറ്റീവ് ആണ്, അത് സി‌എസ്‌എസിൽ എഴുതിയിരിക്കുന്നു. പരീക്ഷണം തുടങ്ങാനുള്ള സമയമാണിത്.